Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/framework/react/guides/form-composition.md`:
- Around line 216-223: The primary example shows a TypeScript collision by
reusing SubmitButton; update the main snippet so ProfileForm.extendForm uses a
uniquely named component (e.g., formComponents: { TeamSubmitButton } or another
distinct identifier) and expose useAppForm from that result; then move the
collision example (reusing SubmitButton) into a separate "Gotcha" or "Type
collision" block with an explanatory note. Target the ProfileForm.extendForm
call, the exported useAppForm binding, and the component names CustomTextField
and SubmitButton when making the edits.

In `@examples/react/composition/.gitignore`:
- Around line 14-16: The .gitignore currently excludes pnpm-lock.yaml,
yarn.lock, and package-lock.json which prevents committing lockfiles; update the
.gitignore in examples/react/composition to stop ignoring the lockfile your
example uses (e.g., remove pnpm-lock.yaml if the project uses pnpm, or remove
yarn.lock/package-lock.json for their respective managers) so the appropriate
lockfile is committed for reproducible installs; ensure only irrelevant
lockfiles remain listed (or none) so the correct lockfile (pnpm-lock.yaml or
yarn.lock or package-lock.json) is tracked in Git.

In `@examples/react/composition/README.md`:
- Around line 3-6: Update the "To run this example:" instructions to explicitly
set the working directory before running npm commands: add a step like "cd
examples/react/composition" (or similar wording) before the existing `npm
install` and `npm run dev` lines so users know to change into the example
directory; ensure the "To run this example:" section in README.md includes that
cd step and that the subsequent commands remain in the same ordered list.

In `@packages/react-form/src/createFormHook.tsx`:
- Around line 641-651: The merge in createFormHook currently lets
extension.fieldComponents and extension.formComponents silently overwrite
existing keys at runtime; before creating the merged objects (the
fieldComponents and formComponents passed into createFormHook), iterate the keys
of extension.fieldComponents and extension.formComponents and check for
collisions against the base fieldComponents and formComponents respectively
(using Object.prototype.hasOwnProperty or similar), and if any duplicate key is
found, throw a clear error (or at minimum console.error and throw) naming the
duplicate key and whether it came from fieldComponents or formComponents so JS
consumers cannot accidentally overwrite base components at runtime.

---

Nitpick comments:
In `@examples/react/composition/src/AppForm/FieldComponents/TextField.tsx`:
- Around line 16-19: The visual error message rendered from
field.state.meta.errors should be programmatically associated with the input:
when field.state.meta.isTouched && !field.state.meta.isValid render the error
element with a stable id (e.g., `${field.input.name || field.input.id}-error`)
and on the input element (in TextField component where the input is rendered)
set aria-invalid={field.state.meta.isValid === false} and
aria-describedby={field.state.meta.isValid ? undefined : `${field.input.name ||
field.input.id}-error`} so screen readers will announce the error; ensure the
error element contains that id and remains hidden/omitted when there are no
errors.

In `@examples/react/composition/src/index.tsx`:
- Around line 66-68: document.getElementById('root') is using a non-null
assertion on rootElement which will throw a less-informative error if the
element is missing; change the logic around the root lookup in index.tsx to
explicitly guard the result of document.getElementById('root') (the rootElement
variable) and either throw a clear Error (e.g., "Root element '#root' not
found") or bail out gracefully before calling createRoot(...).render so
createRoot and render are only invoked when rootElement is non-null.

In `@packages/react-form/tests/createFormHook.test.tsx`:
- Around line 703-952: Add negative-path tests covering the new runtime guards
in createFormHook by asserting that calling extendForm with reserved keys and
with keys that duplicate base hook components throws: write tests that call
createFormHook(...).extendForm({...}) passing a fieldComponents or
formComponents object that includes a reserved key (e.g. keys used by the hook
API like AppField/AppForm or other reserved identifiers your runtime check
rejects) and assert it throws, and another test where extendForm is passed a key
that already exists on the base hook (duplicate base key) and assert that also
throws; use the same test patterns and helpers as the existing extendForm tests
(referencing extendForm, createFormHook, useAppForm, withForm) so the guard
behavior is covered and regression-proof.